<template>
  <div class="goodsAdd-container">
    <bread :params1="'商品管理'" :params2="'添加商品'"></bread>

    <el-card class="box-card">
      <el-alert title="消息提示的文案" type="info" center show-icon> </el-alert>

      <el-steps :active="+name" finish-status="success" style="margin:30px">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      ={{ name }}
      <el-tabs
        v-model="name"
        :tab-position="tabPosition"
        :before-leave="beforeLeave"
      >
        <el-tab-pane name="0" label="基本信息">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
          >
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="ruleForm.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="ruleForm.goods_price"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="ruleForm.goods_weight"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="ruleForm.goods_number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="selectedOptions">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-form>
          <!-- //级联选择器 -->
          <div style="margin:20px  0">
            选择商品分类：<el-cascader
              :options="options"
              :props="props"
              v-model="selectedOptions"
              @change="handleChange"
            >
            </el-cascader
            >==={{ selectedOptions }}----{{ cat_id }}
          </div>
          <!-- //级联选择器 -->
        </el-tab-pane>

        <!-- 商品参数 -->
        <el-tab-pane name="1" label="商品参数">
          <div
            class="box"
            v-for="(item, index) in tabaData"
            :key="index"
            style="margin:25px"
          >
            <p style="margin:10px;">{{ item.attr_name }}</p>

            <el-tag
              style="margin:10px;"
              v-for="(item2, index2) in item.attr_vals"
              :key="index2"
              >{{ item2 }}</el-tag
            >
          </div>
        </el-tab-pane>

        <!-- 商品参数 -->

        <!-- 商品属性 -->
        <el-tab-pane name="2" label="商品属性">
          <div
            class="box2"
            style="margin:20px 0 "
            v-for="(item, index) in tabaData"
            :key="index"
          >
            <h3 style="margin:20px 0 ">{{ item.attr_name }}</h3>

            <el-input type="text" :value="item.attr_vals.join()"> </el-input>
            <!-- {{ typeof item.attr_vals }}
            {{ item.attr_vals }}
            {{ [1, 2, 3, 4, 5].join() }} -->
          </div></el-tab-pane
        >
        <!-- 商品属性 -->

        <!-- 商品图片 -->
        <el-tab-pane name="3" label="商品图片"
          ><el-upload
            class="upload-demo"
            :action="url"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            :headers="headers"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload></el-tab-pane
        >
        <!-- 商品图片 -->

        <el-tab-pane name="4" label="商品内容">商品内容</el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 提示 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="70%">
      <img :src="urladd" alt="" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { cate_api, params_api } from "@/api";

export default {
  data() {
    return {
      active: 0,
      tabPosition: "left",
      name: name,

      ruleForm: {
        goods_name: "",
        goods_price: "",
        goods_number: "",
        goods_weight: "",
        selectedOptions: ""
      },
      rules: {
        goods_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "请输入商品价格", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "请输入商品重量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "请输入商品数量", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        selectedOptions: [
          { required: true, message: "请输入商品分类", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      },
      //级联选择显示的数据
      options: [],
      props: {
        children: "children",
        label: "cat_name",
        value: "cat_id",
        expandTrigger: "hover"
      },
      selectedOptions: [],
      //级联选择显示的数据,
      tabaData: [],
      fileList: [],
      url: "http://klxin.cn:8888/api/private/v1/upload",
      urladd: "",
      dialogVisible: false,
      headers: {
        Authorization: window.sessionStorage.getItem("token")
      }
    };
  },

  methods: {
    next() {
      this.active = +this.name;
    },
    //点击级联选择器
    handleChange() {
      //value 当前选择的分类的id
      // console.log(value, 11111111);
      if (this.selectedOptions.length != 3) {
        return null;
      }
    },
    //级联选择器里面的数据列表
    async getCates() {
      const { data: res } = await cate_api({ type: 3 });
      // console.log(res.data, 5555555);
      this.options = res.data;
      // this.total = res.data.total;
    },
    //tab栏切换的
    beforeLeave(activeName, oldActiveName) {
      console.log(activeName, oldActiveName, 66666666666);
      if (activeName != 0) {
        if (this.selectedOptions.length == 3) {
          if (activeName == 1) {
            // console.log(activeName, 7979999999999);
            //切换到第二个 商品参数 时  调用 表格参数列表数据 函数 并传入参数
            this.getParamsList(this.selectedOptions[2], "many");
          }
          if (activeName == 2) {
            //切换到第二个 商品参数 时  调用 表格参数列表数据 函数 并传入参数
            this.getParamsList(this.selectedOptions[2], "only");
          }
          return true;
        } else {
          return false;
        }
      }
    },
    //  封装发送请求获取  表格参数列表数据
    async getParamsList(id, sel) {
      const { data: res } = await params_api({
        id: id,
        sel: sel
      });
      //   console.log(res.data, 11111);
      //循环数据里的  找到attr_vals转为数组 因为他是字符串 需要把他转成数组 然后循环
      res.data.forEach(item => {
        if (item.attr_vals == "") {
          item.attr_vals = [];
        } else {
          item.attr_vals = item.attr_vals.trim().split(" ");
        }
        // item.attr_vals = item.attr_vals.trim().split(" ");
      });
      this.tabaData = res.data;
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file, 44444444444444);
      this.dialogVisible = true;
      this.urladd = file.url;
    }
  },
  computed: {
    //获取商品分类id  计算属性  selectedOptions商品分类id的数组
    cat_id() {
      if (this.selectedOptions.length != 3) {
        return null;
      } else {
        return this.selectedOptions[this.selectedOptions.length - 1];
      }
    }
  },
  created() {
    this.getCates();
  }
};
</script>

<style scoped lang="less">
.goodsAdd-container {
  .box-card {
    margin-top: 16px;
  }
}
</style>
